<template>
	<div class="main">
		<div class="head">
			<div>
				<label>总交易额:{{list.money}}</label>
				<label>秒杀交易额:{{list.mmoney}}</label>
				<label>普通商品交易额:{{list.pmoney}}</label>
				<label>累计用户数:{{list.user}}</label>
				<label>分销总用户数:{{list.fuser}}</label>
			</div>
		</div>
		<div class="header">
			<el-button @click="show">全部</el-button>
			<el-button @click="btn">微信支付</el-button>
			<el-button @click="btn2">支付宝支付</el-button>
			<el-button @click="btn3">待发货</el-button>
			<el-button @click="btn4">已发货</el-button>
		</div>
		<div class="chart-container" ref="chartRef"></div>
		<div class="data">
			<div class="label">
				<label>实时数据-更新时间：{{data.time}}</label>
			</div>
			
			<div class="xx">
				<ul>
					<li>
						<div>付款金额：{{data.money}}</div>
					</li>
					<li>
						<div>当日：{{data.dmoney}}</div>
					</li>
					<li>
						<div>昨日：{{data.ymoney}}</div>
					</li>
				</ul>
				<ul>
					<li>
						<div>支付订单数：{{data.dd}}</div>
					</li>
					<li>
						<div>当日：{{data.ddd}}</div>
					</li>
					<li>
						<div>昨日：{{data.ydd}}</div>
					</li>
				</ul>
				<ul>
					<li>
						<div>付款人数：{{data.person}}</div>
					</li>
					<li>
						<div>当日：{{data.dperson}}</div>
					</li>
					<li>
						<div>昨日：{{data.yperson}}</div>
					</li>
				</ul>
				<ul>
					<li>
						<div>付款转换率：{{data.rate}}</div>
					</li>
					<li>
						<div>当日：{{data.drate}}</div>
					</li>
					<li>
						<div>昨日：{{data.yrate}}</div>
					</li>
				</ul>
			</div>
			
			<div class="xx">
				<ul>
					<li>
						<div>访客数：{{data.visitor}}</div>
					</li>
					<li>
						<div>当日：{{data.dvisitor}}</div>
					</li>
					<li>
						<div>昨日：{{data.yvisitor}}</div>
					</li>
				</ul>
				<ul>
					<li>
						<div>访问次数：{{data.frequency}}</div>
					</li>
					<li>
						<div>当日：{{data.dfrequency}}</div>
					</li>
					<li>
						<div>昨日：{{data.yfrequency}}</div>
					</li>
				</ul>
				<ul>
					<li>
						<div>新增用户：{{data.add}}</div>
					</li>
					<li>
						<div>当日：{{data.dadd}}</div>
					</li>
					<li>
						<div>昨日：{{data.yadd}}</div>
					</li>
				</ul>
				<ul>
					<li>
						<div>累计用户：{{data.user}}</div>
					</li>
					<li>
						<div>当日：{{data.duser}}</div>
					</li>
					<li>
						<div>昨日：{{data.yuser}}</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import mockjs from "@/mockjs/index.js"

const chartRef = ref(null)
let chartInstance = null
const list = mockjs.getDataChart()
const data = mockjs.getDateDay()

onMounted(() => {
  chartInstance = echarts.init(chartRef.value)

  // 模拟数据
  const data = [
    { name: 'A', value: 100 },
    { name: 'B', value: 200 },
    { name: 'C', value: 150 },
    { name: 'D', value: 300 },
    { name: 'E', value: 88 },
    { name: 'F', value: 98 },
    { name: 'G', value: 123 },
    { name: 'H', value: 219 }
  ]

  // 配置项
  const options = {
    xAxis: {
      type: 'category',
      data: data.map((item) => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.map((item) => item.value),
        type: 'line'
      }
    ]
  }

  // 设置图表配置项
  chartInstance.setOption(options)
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style scoped>
	.main{
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		flex-direction: column;
		
	}
	
.chart-container {
  width: 100%;
  height: 400px;
}
.main .head{
	margin-top: 20px;
}
.main .head div{
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.data{
	border: 1px solid black;
	
}
.xx{
	display: flex;
}
ul li{
	list-style: none;
	color: gray;
}
.data label{
	color: gray;
}
.data .label{
	margin:10px 50px;
}
</style>
